@extends('admin.layout.master')

@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('lib/webuploader/0.1.5/webuploader.css') }}" />
@endsection

@section('content')
    <section class="Hui-article-box">
        <nav class="breadcrumb">
            <i class="Hui-iconfont">&#xe67f;</i> 首页
            <span class="c-gray en">&gt;</span> 分类管理
            <span class="c-gray en">&gt;</span> 修改产品
            <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
                <i class="Hui-iconfont">&#xe68f;</i>
            </a>
        </nav>
        <div class="pd-20">
            <form id="addForm" class="form form-horizontal" action="" method="post" onsubmit="return false;">
                {{ csrf_field() }}
                <input type="hidden" name="id" value="{{ $product->id }}">
                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1"><span class="c-red">*</span>所属车厂：</label>
                    <div class="formControls col-xs-4 col-sm-5">
                        <span class="select-box">
                            <select name="factory" class="select" id="factory">
                                <option value="">--请选择--</option>
                                @foreach($factories as $factory)
                                    <option {{ $factory->id == $product->factory_id ? 'selected' : '' }}
                                            value="{{ $factory->id }}">
                                        {{ $factory->name }}
                                    </option>
                                @endforeach
                            </select>
                        </span>
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1"><span class="c-red">*</span>所属车型：</label>
                    <div class="formControls col-xs-4 col-sm-5">
                        <span class="select-box">
                            <select name="model" class="select" id="model">
                                <option value="">--请选择--</option>
                                @foreach($models as $model)
                                    <option {{ $model->id == $product->model_id ? 'selected' : '' }}
                                            value="{{ $model->id }}">
                                        {{ $model->name }}
                                    </option>
                                @endforeach
                            </select>
                        </span>
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1"><span class="c-red">*</span>产品名：</label>
                    <div class="formControls col-xs-4 col-sm-5">
                        <input type="text" class="input-text" name="name" value="{{ $product->name }}">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1"><span class="c-red">*</span>产品展示图：</label>
                    <div class="formControls col-xs-4 col-sm-5">
                        <div id="uploader" class="wu-example">
                            <div id="thelist" class="uploader-list"></div>
                            <div class="btns">
                                <div id="picker">选择图片</div>
                                <button id="ctlBtn" class="btn btn-default" type="button">开始上传</button>
                            </div>
                        </div>
                        <input type="hidden" id="thumbnail" name="thumbnail">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1">附件1：</label>
                    <div class="formControls col-xs-3 col-sm-2">
                        <input value="{{ $product->file_names[0] }}" type="text" class="input-text" id="attachmentName1" name="attachmentName1">
                    </div>
                    <div class="formControls col-xs-4 col-sm-5">
                        <div id="uploader" class="wu-example">
                            <div id="thelist1" class="uploader-list"></div>
                            <div class="btns">
                                <div id="picker1">选择文件</div>
                                <button id="ctlBtn1" class="btn btn-default" type="button">开始上传</button>
                            </div>
                        </div>
                        <input type="hidden" id="attachment1" name="attachment1">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1">附件2：</label>
                    <div class="formControls col-xs-3 col-sm-2">
                        <input value="{{ $product->file_names[1] }}" type="text" class="input-text" id="attachmentName2" name="attachmentName2">
                    </div>
                    <div class="formControls col-xs-4 col-sm-5">
                        <div id="uploader" class="wu-example">
                            <div id="thelist2" class="uploader-list"></div>
                            <div class="btns">
                                <div id="picker2">选择文件</div>
                                <button id="ctlBtn2" class="btn btn-default" type="button">开始上传</button>
                            </div>
                        </div>
                        <input type="hidden" id="attachment2" name="attachment2">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1">附件3：</label>
                    <div class="formControls col-xs-3 col-sm-2">
                        <input value="{{ $product->file_names[2] }}" type="text" class="input-text" id="attachmentName3" name="attachmentName3">
                    </div>
                    <div class="formControls col-xs-4 col-sm-5">
                        <div id="uploader" class="wu-example">
                            <div id="thelist3" class="uploader-list"></div>
                            <div class="btns">
                                <div id="picker3">选择文件</div>
                                <button id="ctlBtn3" class="btn btn-default" type="button">开始上传</button>
                            </div>
                        </div>
                        <input type="hidden" id="attachment3" name="attachment3">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1">附件4：</label>
                    <div class="formControls col-xs-3 col-sm-2">
                        <input value="{{ $product->file_names[3] }}" type="text" class="input-text" id="attachmentName4" name="attachmentName4">
                    </div>
                    <div class="formControls col-xs-4 col-sm-5">
                        <div id="uploader" class="wu-example">
                            <div id="thelist4" class="uploader-list"></div>
                            <div class="btns">
                                <div id="picker4">选择文件</div>
                                <button id="ctlBtn4" class="btn btn-default" type="button">开始上传</button>
                            </div>
                        </div>
                        <input type="hidden" id="attachment4" name="attachment4">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1">附件5：</label>
                    <div class="formControls col-xs-3 col-sm-2">
                        <input value="{{ $product->file_names[4] }}" type="text" class="input-text" id="attachmentName5" name="attachmentName5">
                    </div>
                    <div class="formControls col-xs-4 col-sm-5">
                        <div id="uploader" class="wu-example">
                            <div id="thelist5" class="uploader-list"></div>
                            <div class="btns">
                                <div id="picker5">选择文件</div>
                                <button id="ctlBtn5" class="btn btn-default" type="button">开始上传</button>
                            </div>
                        </div>
                        <input type="hidden" id="attachment5" name="attachment5">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-1">PPT：</label>
                    <div class="formControls col-xs-4 col-sm-5">
                        <script id="editor" name="content" type="text/plain" style="width:100%;height:400px;">
                            {!! $product->content !!}
                        </script>
                    </div>
                </div>

                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-2 col-sm-offset-1">
                        <button id="submit" class="btn btn-primary radius" type="button">
                            <i class="Hui-iconfont">&#xe632;</i> 保存并提交
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </section>
@endsection

@section('javascript')
    <script type="text/javascript" src="{{ asset('lib/webuploader/0.1.5/webuploader.js') }}"></script>
    <script type="text/javascript" src="{{ asset('lib/ueditor/1.4.3/ueditor.config.js') }}"></script>
    <script type="text/javascript" src="{{ asset('lib/ueditor/1.4.3/ueditor.all.min.js') }}"> </script>
    <script type="text/javascript" src="{{ asset('lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js') }}"></script>
    <script type="text/javascript">

        var ue = UE.getEditor('editor');

        var uploader = WebUploader.create({
            swf: '{{ asset('lib/webuploader/0.1.5/Uploader.swf') }}',
            server: '{{ asset('lib/webuploader/0.1.5/server/fileupload.php') }}',
            pick: {id: '#picker', multiple: false},
            chunked: true,
            chunkSize: 1024 * 1024,
            formData: {guid: 'yamete'},
            resize: false
        });
        uploader.on( 'fileQueued', function( file ) {
            var $list = $('#thelist');
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info" style="color: #2980B9;">' + file.name + '</h4>' +
                '<p class="state" style="color: #16A085;">等待上传...</p>' +
                '</div>' );
        });
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });
        uploader.on( 'uploadSuccess', function( file ) {
            $('#thumbnail').val(file.name);
            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });
        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });

        var uploader1 = WebUploader.create({
            swf: '{{ asset('lib/webuploader/0.1.5/Uploader.swf') }}',
            server: '{{ asset('lib/webuploader/0.1.5/server/fileupload.php') }}',
            pick: {id: '#picker1', multiple: false},
            chunked: true,
            chunkSize: 1024 * 1024,
            formData: {guid: 'yamete1'},
            resize: false
        });
        uploader1.on( 'fileQueued', function( file ) {
            var $list = $('#thelist1');
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info" style="color: #2980B9;">' + file.name + '</h4>' +
                '<p class="state" style="color: #16A085;">等待上传...</p>' +
                '</div>' );
        });
        uploader1.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });
        uploader1.on( 'uploadSuccess', function( file ) {
            $('#attachment1').val(file.name);
            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });
        uploader1.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });
        uploader1.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });

        var uploader2 = WebUploader.create({
            swf: '{{ asset('lib/webuploader/0.1.5/Uploader.swf') }}',
            server: '{{ asset('lib/webuploader/0.1.5/server/fileupload.php') }}',
            pick: {id: '#picker2', multiple: false},
            chunked: true,
            chunkSize: 1024 * 1024,
            formData: {guid: 'yamete2'},
            resize: false
        });
        uploader2.on( 'fileQueued', function( file ) {
            var $list = $('#thelist2');
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info" style="color: #2980B9;">' + file.name + '</h4>' +
                '<p class="state" style="color: #16A085;">等待上传...</p>' +
                '</div>' );
        });
        uploader2.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });
        uploader2.on( 'uploadSuccess', function( file ) {
            $('#attachment2').val(file.name);
            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });
        uploader2.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });
        uploader2.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });

        var uploader3 = WebUploader.create({
            swf: '{{ asset('lib/webuploader/0.1.5/Uploader.swf') }}',
            server: '{{ asset('lib/webuploader/0.1.5/server/fileupload.php') }}',
            pick: {id: '#picker3', multiple: false},
            chunked: true,
            chunkSize: 1024 * 1024,
            formData: {guid: 'yamete3'},
            resize: false
        });
        uploader3.on( 'fileQueued', function( file ) {
            var $list = $('#thelist3');
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info" style="color: #2980B9;">' + file.name + '</h4>' +
                '<p class="state" style="color: #16A085;">等待上传...</p>' +
                '</div>' );
        });
        uploader3.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });
        uploader3.on( 'uploadSuccess', function( file ) {
            $('#attachment3').val(file.name);
            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });
        uploader3.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });
        uploader3.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });

        var uploader4 = WebUploader.create({
            swf: '{{ asset('lib/webuploader/0.1.5/Uploader.swf') }}',
            server: '{{ asset('lib/webuploader/0.1.5/server/fileupload.php') }}',
            pick: {id: '#picker4', multiple: false},
            chunked: true,
            chunkSize: 1024 * 1024,
            formData: {guid: 'yamete4'},
            resize: false
        });
        uploader4.on( 'fileQueued', function( file ) {
            var $list = $('#thelist4');
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info" style="color: #2980B9;">' + file.name + '</h4>' +
                '<p class="state" style="color: #16A085;">等待上传...</p>' +
                '</div>' );
        });
        uploader4.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });
        uploader4.on( 'uploadSuccess', function( file ) {
            $('#attachment4').val(file.name);
            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });
        uploader4.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });
        uploader4.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });

        var uploader5 = WebUploader.create({
            swf: '{{ asset('lib/webuploader/0.1.5/Uploader.swf') }}',
            server: '{{ asset('lib/webuploader/0.1.5/server/fileupload.php') }}',
            pick: {id: '#picker5', multiple: false},
            chunked: true,
            chunkSize: 1024 * 1024,
            formData: {guid: 'yamete5'},
            resize: false
        });
        uploader5.on( 'fileQueued', function( file ) {
            var $list = $('#thelist5');
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info" style="color: #2980B9;">' + file.name + '</h4>' +
                '<p class="state" style="color: #16A085;">等待上传...</p>' +
                '</div>' );
        });
        uploader5.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });
        uploader5.on( 'uploadSuccess', function( file ) {
            $('#attachment5').val(file.name);
            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });
        uploader5.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });
        uploader5.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });

        $(function () {

            $('#ctlBtn').click(function () {
                uploader.upload();
            });

            $('#ctlBtn1').click(function () {
                var name = $('#attachmentName1').val();
                if (name == '') {
                    layer.alert(
                        '请输入附件名，再进行上传操作！',
                        {icon: 5, title: '提示信息'});
                    return;
                }
                uploader1.upload();
            });

            $('#ctlBtn2').click(function () {
                var name = $('#attachmentName2').val();
                if (name == '') {
                    layer.alert(
                        '请输入附件名，再进行上传操作！',
                        {icon: 5, title: '提示信息'});
                    return;
                }
                uploader2.upload();
            });

            $('#ctlBtn3').click(function () {
                var name = $('#attachmentName3').val();
                if (name == '') {
                    layer.alert(
                        '请输入附件名，再进行上传操作！',
                        {icon: 5, title: '提示信息'});
                    return;
                }
                uploader3.upload();
            });

            $('#ctlBtn4').click(function () {
                var name = $('#attachmentName4').val();
                if (name == '') {
                    layer.alert(
                        '请输入附件名，再进行上传操作！',
                        {icon: 5, title: '提示信息'});
                    return;
                }
                uploader4.upload();
            });

            $('#ctlBtn5').click(function () {
                var name = $('#attachmentName5').val();
                if (name == '') {
                    layer.alert(
                        '请输入附件名，再进行上传操作！',
                        {icon: 5, title: '提示信息'});
                    return;
                }
                uploader5.upload();
            });

            $('#factory').change(function () {
                var id = $(this).val();
                $.ajax({
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    type: 'POST',
                    url: '{{ url('admin/type/getModel') }}',
                    dataType: 'json',
                    data: {id: id},
                    success: function (data) {
                        if (data.code == '0') {
                            $('#model').html(data.msg);
                        }
                    }
                });
            });

            $('#submit').click(function () {
                $('#addForm').ajaxSubmit({
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == '0') {
                            location.href = '{{ url('admin/product') }}';
                        } else {
                            layer.alert(result.msg, {icon: 5, title: '提示信息'});
                        }
                    }
                });
            });

        });

    </script>
@endsection